<template>
  <div>
    <!-- :acceptSon="acceptSon" 第一种方法的 这是父向子传递函数的方式 -->
    <!-- @dier="der" 第二种方法的 绑定事件，负责接收数据，这是自定义函数的方式 -->
    <Son :acceptSon="acceptSon" @dier="der"></Son>
    <!-- 打印儿子传来的数据 -->
    <h1>{{sonData}}</h1>
  </div>
</template>

<script>
  // 导入儿子组件
import Son from './components/Son.vue';
export default {
  data(){
    return{
      // 定义一个参数，用来接收儿子传递过来的数据，方便使用
      sonData:''
    }
  },  
  methods:{
    //第一种方法的函数
    acceptSon(e){
      console.log(e);
      this.sonData = e
    },
    //第二种方法的函数
    der(e){
      this.sonData = e
    }
  },
  components: {
    // 将导入的儿子组件加入到组件对象
    Son
  }
}
</script>

